<template>
	<div class="inventory-purchase-analysis">
		<el-row :gutter="18" style="margin-bottom:16px;">
			<el-col :xs="24" :md="12">
				<el-card>
					<div style="font-weight:bold;margin-bottom:10px;">月度采购金额&库存变化</div>
					<div ref="trendRef" style="width:100%;height:320px;"></div>
				</el-card>
			</el-col>
			<el-col :xs="24" :md="12">
				<el-card>
					<div style="font-weight:bold;margin-bottom:10px;">主要物料消耗TOP5</div>
					<div ref="consumeRef" style="width:100%;height:320px;"></div>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="18">
			<el-col :xs="24" :md="12">
				<el-card>
					<div style="font-weight:bold;margin-bottom:10px;">采购结构占比</div>
					<div ref="pieRef" style="width:100%;height:320px;"></div>
				</el-card>
			</el-col>
			<el-col :xs="24" :md="12">
				<el-card>
					<div style="font-weight:bold;margin-bottom:10px;">供应商采购金额TOP5</div>
					<div ref="supplierRef" style="width:100%;height:320px;"></div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

// 采购/库存趋势数据
const months = ['2023-10', '2023-11', '2023-12', '2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06']
const purchaseAmt = [235000, 215000, 265000, 180000, 195000, 210000, 250000, 237000, 190000]
const inventoryVal = [320000, 335000, 312000, 298000, 308000, 322000, 315000, 327000, 319000]

// 主要物料消耗
const topConsume = [
	{ name: '头孢曲松钠原料', value: 8400 },
	{ name: '阿莫西林原粉', value: 7850 },
	{ name: '玻璃安瓿', value: 6230 },
	{ name: '聚乙烯薄膜', value: 5350 },
	{ name: '维生素C原粉', value: 4880 }
]

// 采购结构
const purchaseStruct = [
	{ name: '原料药', value: 36 },
	{ name: '包装材料', value: 28 },
	{ name: '辅料', value: 21 },
	{ name: '其它', value: 15 }
]

// 供应商采购金额TOP5
const supplierTop = [
	{ name: '国药集团', value: 142000 },
	{ name: '华润医药', value: 124800 },
	{ name: '恒瑞材料', value: 102300 },
	{ name: '复星化工', value: 95600 },
	{ name: '山东恒力', value: 89100 }
]

const trendRef = ref()
const consumeRef = ref()
const pieRef = ref()
const supplierRef = ref()
let chart1, chart2, chart3, chart4

function renderTrend() {
	if (!chart1 && trendRef.value) chart1 = echarts.init(trendRef.value)
	if (!chart1) return
	chart1.setOption({
		tooltip: { trigger: 'axis' },
		legend: { data: ['采购金额', '库存总值'] },
		grid: { left: 50, right: 24, top: 40, bottom: 36, containLabel: true },
		xAxis: { type: 'category', data: months },
		yAxis: { type: 'value', min: 0 },
		series: [
			{
				name: '采购金额',
				type: 'bar',
				data: purchaseAmt,
				barWidth: 28,
				itemStyle: { color: '#409EFF' }
			},
			{
				name: '库存总值',
				type: 'line',
				data: inventoryVal,
				yAxisIndex: 0,
				lineStyle: { width: 2, color: '#67C23A' },
				symbol: 'circle'
			}
		]
	})
}

function renderConsume() {
	if (!chart2 && consumeRef.value) chart2 = echarts.init(consumeRef.value)
	if (!chart2) return
	chart2.setOption({
		tooltip: { trigger: 'axis' },
		grid: { left: 60, right: 18, top: 36, bottom: 36, containLabel: true },
		xAxis: { type: 'category', data: topConsume.map(d => d.name), axisLabel: { rotate: 18 } },
		yAxis: { type: 'value', minInterval: 1 },
		series: [{
			name: '消耗量',
			type: 'bar',
			data: topConsume.map(d => d.value),
			barWidth: 38,
			label: { show: true, position: 'top' },
			itemStyle: { color: '#E6A23C' }
		}]
	})
}

function renderPie() {
	if (!chart3 && pieRef.value) chart3 = echarts.init(pieRef.value)
	if (!chart3) return
	chart3.setOption({
		tooltip: { trigger: 'item' },
		legend: {
			orient: 'vertical',
			right: 5,
			top: 200
		},
		series: [{
			name: '采购结构占比',
			type: 'pie',
			radius: ['44%', '64%'],
			label: {
				formatter: '{b|{b}}\n{d|{d}%}',
				rich: {
					b: { fontWeight: 'bold', fontSize: 14, lineHeight: 20 },
					d: { color: '#409EFF', fontSize: 13 }
				}
			},
			avoidLabelOverlap: false,
			labelLine: { length: 16, length2: 10 },
			data: purchaseStruct.map(d => ({ value: d.value, name: d.name })),
			itemStyle: {
				borderRadius: 6,
				borderColor: '#fff',
				borderWidth: 2
			}
		}]
	})
}

function renderSupplier() {
	if (!chart4 && supplierRef.value) chart4 = echarts.init(supplierRef.value)
	if (!chart4) return
	chart4.setOption({
		tooltip: { trigger: 'axis' },
		grid: { left: 60, right: 24, top: 36, bottom: 36, containLabel: true },
		xAxis: { type: 'category', data: supplierTop.map(d => d.name), axisLabel: { rotate: 15 } },
		yAxis: { type: 'value', min: 0 },
		series: [{
			name: '采购金额',
			type: 'bar',
			data: supplierTop.map(d => d.value),
			barWidth: 38,
			label: { show: true, position: 'top' },
			itemStyle: { color: '#67C23A' }
		}]
	})
}

onMounted(() => {
	setTimeout(() => {
		renderTrend()
		renderConsume()
		renderPie()
		renderSupplier()
	}, 20)
})
</script>

<style scoped>
.inventory-purchase-analysis {
	padding: 16px;
}
</style>
  
